<!--  -->
<template>
  <div class="data_editt_add">
    <div class="data_head">
      <div class="data_head_title">{{ Props.is_edit_data ? '修改' : '添加' }}数据</div>
      <div class="data_head_close" @click="close">关闭</div>
    </div>
    <div class="data_list">
      <el-form
        :model="Props.add_w3d_services_data"
        label-width="auto"
        style="width: 80%;"
      >
        <el-form-item label="名称" prop="other_name">
          <el-input v-model="localData.other_name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="三维数据类型" prop="data_type">
          <el-select-v2
            v-model="localData.data_type"
            placeholder="选择三维数据类型"
            :options="select_data_type"
          />
        </el-form-item>
        <el-form-item label="项目名称" prop="data_name" v-if="localData.data_type!=='白模'">
          <el-input v-model="localData.data_name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="审批数据类型" prop="approval_data_type">
          <el-select-v2
            v-model="localData.approval_data_type"
            placeholder="选择审批数据类型"
            :options="select_approval_data_type"
          />
        </el-form-item>
        <el-form-item label="行政区划" prop="administrative_region">
          <el-select-v2
            v-model="localData.administrative_region"
            placeholder="选择行政区划"
            :options="select_administrative_region_filter"
          />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="localData.publish_time"
            type="date"
            aria-label="选择时间"
            placeholder="选择时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="数据访问地址" prop="service_url">
          <el-input v-model="localData.service_url" placeholder="请输入数据访问地址" />
        </el-form-item>
        <el-form-item label="三维数据存储地址" prop="data_storage_addr">
          <el-input v-model="localData.data_storage_addr" placeholder="请输入三维数据存储地址" />
        </el-form-item>
      </el-form>
    </div>
    <div class="data_func">
      <el-button type="primary" @click="insertAndUpdateW3dServiceInfo"
        >{{ Props.is_edit_data ? '修改' : '添加' }}</el-button
      >
    </div>
  </div>

</template>


<script setup>
import {defineEmits, defineProps, onMounted, ref, computed} from "vue";
import {getUniqueZj, insertW3dServiceInfo, updateW3dServiceInfo,deleteW3dServiceInfoById} from '@/api/W3dServiceApi';
import {ElMessage} from "element-plus";

//
const Emits = defineEmits(["close_card"]);

const Props = defineProps({
  add_w3d_services_data: {
    type: Object,
  },
  forbid_administrative_region: {
    type: Array,
  },
  is_edit_data: {
    type: Boolean,
  }
});

const localData = ref({
  ...Props.add_w3d_services_data,
  id: Props.add_w3d_services_data.data_id,
});

const select_data_type = ref([{
  value: '白模',
  label: '白模'
}, {
  value: '倾斜',
  label: '倾斜'
}])

// 核心数据，核心数据权属，业务数据，互联网数据
const select_approval_data_type = ref([{
  value: '核心数据',
  label: '核心数据'
}, {
  value: '核心数据权属',
  label: '核心数据权属'
}, {
  value: '业务数据',
  label: '业务数据'
}, {
  value: '互联网数据',
  label: '互联网数据'
}])

const select_administrative_region = ref([{
  value: '白云湖街道',
  label: '白云湖街道'
}])

const select_administrative_region_filter = computed(() => {
  switch (localData.value.data_type) {
    case '白模':
      return select_administrative_region.value.filter(item => {
        return !Props.forbid_administrative_region.includes(item.value);
      })
    default:
      return select_administrative_region.value;
  }
})

onMounted(() => {
  getUniqueZj().then(res => {
    select_administrative_region.value = res.data.map(item => {
      return {
        value: item,
        label: item
      }
    })
  })
});

const month = {
	'Jan': '01',
	'Feb': '02',
	'Mar': '03',
	'Apr': '04',
	'May': '05',
	'Jun': '06',
	'Jul': '07',
	'Aug': '08',
	'Sep': '09',
	'Oct': '10',
	'Nov': '11',
	'Dec': '12'
};

const insertAndUpdateW3dServiceInfo = () => {
  if(typeof(localData.value.publish_time) === 'object') {
    let time = localData.value.publish_time.toDateString().split(' ');
    localData.value.publish_time = time[3] + '-' + month[time[1]] + '-' + time[2];
  }
  // 项目名称不能直接更改，只能通过删除再添加的方式进行
  // 后端的逻辑是：将传入的data_name作为项目名称后，再将当前时间赋值给data_name
  // 白膜可以直接修改
  if(Props.is_edit_data){
    if(localData.value.data_type !== '白模') {
      deleteW3dServiceInfoById(localData.value.data_id).then(res => {
        if (res.code === 0) {
          insertW3dServiceInfo(localData.value).then(res => {
            if (res.code === 0) {
              ElMessage({
                message: "编辑成功！",
                type: "success",
              });
            }
            close();
          });
        }
      })
    } else {
      updateW3dServiceInfo(localData.value).then(res => {
        if (res.code === 0) {
          ElMessage({
            message: "编辑成功！",
            type: "success",
          });
        }
        close();
      });
    }
  }else {
    insertW3dServiceInfo(localData.value).then(res => {
      if(res.code === 0){
        ElMessage({
          message: "新增成功！",
          type: "success",
        });
      }
      close();
    });
  }
};

const close = () => {
  Emits("close_card", false);
};

</script>

<style scoped>
.data_editt_add {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 18px;
  background-color: #fff;
  border: 1px solid gray;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
}

.data_head {
  display: flex;
  flex: 0.5;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.data_head_title {
  display: inline;
  margin-left: 10px;
}

.data_head_close {
  display: inline;
  margin-right: 10px;
  cursor: pointer;
}

.data_list {
  display: flex;
  flex: 6;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.data_func {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

</style>
